<template>
    <div class="container">
        <Header />
        <BackBtn />
        <div class="content">
            <div class="form">
                <div class="loginContainer" v-if="!$store.state.unitLogin">
                    <div class="loginHeader">
                        <button
                            :class="loginIndex == 0 ? 'active' : ''"
                            @click="loginChange(0)"
                        >
                            登陆
                        </button>
                        <button
                            :class="loginIndex == 1 ? 'active' : ''"
                            @click="loginChange(1)"
                        >
                            注册
                        </button>
                    </div>
                    <div class="login">
                        <van-field
                            v-model="postData.loginname"
                            name="loginname"
                            :border="false"
                            placeholder="账号"
                            color="#000"
                            class="use"
                        />
                        <van-field
                            v-model="postData.password"
                            name="name"
                            type="password"
                            class="use"
                            placeholder="密码"
                        />
                        <div style="padding: 16px 0px" v-if="loginIndex == 0">
                            <van-button
                                round
                                block
                                type="primary"
                                @click="login"
                            >
                                登陆
                            </van-button>
                        </div>
                    </div>
                </div>
                <van-form v-if="loginIndex == 1">
                    <!-- 审核不通过 -->
                    <div v-if="unitStatus == 0">
                        <van-notice-bar
                            color="red"
                            background="#fff"
                            left-icon="info-o"
                        >
                            审核不通过，请重新填写信息提交
                        </van-notice-bar>
                    </div>
                    <van-field
                        v-model="postData.unitName"
                        required
                        name="unitName"
                        label="公司名称"
                        placeholder="请输入公司名称"
                        :rules="[{ required: true, message: '请填写公司名称' }]"
                    />
                    <van-field
                        v-model="postData.unitInfo"
                        rows="8"
                        autosize
                        required
                        label="公司介绍"
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入公司介绍"
                        show-word-limit
                        :rules="[{ required: true, message: '请填写公司介绍' }]"
                    />
                    <van-field
                        name="uploader"
                        required
                        label="营业执照"
                        :rules="[{ required: true, message: '请上传营业执照' }]"
                    >
                        <template #input>
                            <van-uploader
                                v-model="postData.image"
                                preview-size="70"
                                :max-count="1"
                            />
                        </template>
                    </van-field>
                    <div style="padding: 16px 10px">
                        <van-button round block type="primary" @click="submit">
                            注册并申请审核
                        </van-button>
                    </div>
                </van-form>
            </div>

            <div class="postLis" v-if="$store.state.unitLogin">
                <div v-if="unitStatus == 1">
                    <div class="postListTitle">
                        <h4>岗位管理</h4>
                        <button @click="goPostRelease">发布新岗位</button>
                    </div>
                    <div class="tip">
                        <i><van-icon name="fail" color="#fff" /></i>
                        <span>点击职位可直接编辑改职位</span>
                    </div>
                    <!-- 有列表 -->
                    <Hot :jobList="jobList" @delete="onDelete" />
                </div>
                <!-- 审核中 -->
                <van-empty
                    v-if="unitStatus == 2"
                    image=""
                />
            </div>
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header.vue";
import BackBtn from "@/components/BackBtn";
import Hot from "@/components/Hot";
import axios from "@/api/axios.js";
import qs, { stringify } from "qs";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
    components: {
        Header,
        BackBtn,
        Hot,
    },
    data() {
        return {
            postData: {
                loginname: "",
                password: "",
                unitName: "",
                unitInfo: "",
                image: [],
            },
            loginIndex: 0,
            jobList: [], //职位列表
            test: 0,
        };
    },
    methods: {
        ...mapMutations(["getUnitLogin", "getUnitData"]),
        loginChange(index) {
            this.loginIndex = index;
        },
        goPostRelease() {
            this.$router.push("/postrelease");
        },
        //Hot删除刷新
        onDelete() {
            this.getjobList();
        },
        //获取职位列表
        getjobList() {
            let unitData = ""
            unitData = JSON.parse(this.$store.state.unitData);
            axios
                .get(`/hkrc/unit/getJobList?unitId=${unitData.unitId}`)
                .then((res) => {
                    if (res.data.success) {
                        this.jobList = res.data.jobList;
                    } else {
                        Toast.fail("出错了");
                    }
                });
        },
        // 验证是否通过
        isUnit() {
            axios
                .get("/hkrc/unit/getUnitInfo", { withCredentials: true })
                .then((res) => {
                    console.log("检测是否通过", res);
                    if (res.data.success) {
                        this.getUnitData(JSON.stringify(res.data.data));
                    }else{
                        Toast.fail(res.data.msg);
                        if(res.data.msg == "企业未登录"){
                           this.getUnitLogin(res.success);
                        }
                    }
                });
        },
        // 注册提交
        submit() {
            let data = {
                loginname: this.postData.loginname,
                password: this.postData.password,
                unitName: this.postData.unitName,
                unitInfo: this.postData.unitInfo,
                image: this.postData.image[0].content,
            };
            axios
                .post("/hkrc/unit/saveUnit", qs.stringify(data))
                .then((res) => {
                    console.log(res);
                    if (res.success) {
                        Toast.success("注册成功");
                        this.loginIndex = 0;
                    } else {
                        Toast.fail("出错了");
                    }
                });
        },

        //登陆
        login() {
            let data = {
                loginname: this.postData.loginname,
                password: this.postData.password,
            };
            axios
                .post("/hkrc/unit/login", qs.stringify(data), {
                    withCredentials: true,
                })
                .then((res) => {
                    console.log(res);
                    if (res.success) {
                        Toast.success("登陆成功");
                        this.isUnit();
                        this.getUnitLogin(res.success);
                    } else {
                        Toast.fail("账号或密码不正确");
                    }
                });
        },
    },
    created() {
        // 显示删除按钮
        this.$store.state.isDel = true;
        // 隐藏搜索结果
        this.$store.state.isSearchDetail = false;
        // 隐藏搜索标题
        this.$store.state.isHot = false;
        // 规定岗位点击进去编辑
        this.$store.state.isCompany = true;
        this.isUnit();

        if (this.$route.params.back) {
            window.location.reload();
        }
    },
    computed: {
        unitStatus() {
            let status = {};
            console.log(this.$store.state.unitData);
            if (this.$store.state.unitData) {
                status = JSON.parse(this.$store.state.unitData);
                if (status.unitStatus == 0) {
                    this.loginIndex = 1;
                } else if (status.unitStatus == 1) {
                    this.getjobList();
                } else {
                }
            } else {
                status.unitStatus = true;
            }

            return status.unitStatus;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    min-height: 100vh;
    background: #f5f6f8;
    .content {
        width: 100%;
        padding: 15px 18.5px;
        box-sizing: border-box;
        .form {
            // padding-top: 15px;
            border-radius: 10px;
            background: #fff;
            .loginContainer {
                padding: 0 15px;
                padding-top: 15px;
                padding-bottom: 15px;
                .loginHeader {
                    button {
                        padding: 5px 0;
                        margin-left: 15px;
                        font-size: 17px;
                        color: #999999;
                    }
                    .active {
                        font-size: 17px;
                        font-weight: bold;
                        color: #000000;
                        border-bottom: 3.5px solid #000;
                    }
                }
                .login {
                    .use {
                        background: #eee;
                        border-radius: 25px;
                        margin: 20px 0;
                        font-size: 13px;
                        padding-left: 20px;
                    }
                    ::placeholder {
                        color: #000;
                        font-weight: 400;
                    }
                }
            }
        }
        .postLis {
            margin-top: 15px;
            border-radius: 10px;
            background: #fff;
            .postListTitle {
                padding: 0 10px;
                padding-top: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                h4 {
                    font-size: 15px;
                    font-weight: bold;
                    color: #000000;
                }
                button {
                    font-size: 13px;
                    padding: 5px 12.5px;
                    color: #ffffff;
                    background: #2c85f3;
                    border-radius: 25px;
                }
            }
            .tip {
                margin-top: 15px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                i {
                    width: 19px;
                    height: 19px;
                    line-height: 19px;
                    text-align: center;
                    border-radius: 50%;
                    margin-right: 5px;
                    background: #2c85f3;
                }
                span {
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }
}
</style>